<template>
  <div class="markdown-view">
	  <mavon-editor :value="mdText" ref="md"
	  	:codeStyle="codeStyle" 
	  	:boxShadow="false"
		:toolbars="toolbars"
		@imgAdd="img_add"
	  >
		</mavon-editor>
  </div>
</template>

<script>
	import {api_upload} from '@/api/file'
	
	export default {
		name: 'HelloWorld',
		props: {
			codeStyle: {
				type: String,
				default: 'github'
			},
			mdText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				toolbars: {
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					strikethrough: true, // 中划线
					stress: true, //强调
					mark: true, // 标记
					superscript: true, // 上角标
					subscript: true, // 下角标
					quote: true, // 引用
					ol: true, // 有序列表
					ul: true, // 无序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					code: true, // code
					table: true, // 表格
					fullscreen: true, // 全屏编辑
					readmodel: true, // 沉浸式阅读
					htmlcode: true, // 展示html源码
					help: true, // 帮助
					/* 1.3.5 */
					undo: true, // 上一步
					redo: true, // 下一步
					trash: true, // 清空
					/* 1.4.2 */
					navigation: true, // 导航目录
					/* 2.1.8 */
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					/* 2.2.1 */
					subfield: true, // 单双栏模式
					preview: true, // 预览
				}
			}
		},
		methods: {
			html_str() {
				return this.$refs.md.d_render
			},
			md_str() {
				return this.$refs.md.d_value
			},
			img_add(pos, $file) {
				// 将图片上传到服务器.
				var formdata = new FormData();
				formdata.append('image', $file);
				api_upload(formdata).then(res=>{
					console.log('------------------------')
					let url = '/interview' + res.data.result.url;
					// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
					this.$refs.md.$img2Url(pos, url);
				})
			},
			mark() {
				let selecter = window.getSelection();
				let selectStr = selecter.toString();
				let rang = selecter.getRangeAt(0)
				let _node = document.createElement("i")
				_node.textContent = selectStr
				rang.surroundContents(_node);
			}
		}
	}
</script>

<style scoped lang="scss">
	.markdown-view {
		height: calc(100% - 60px);
		.markdown-body {
			height: 100%;
		}
	}
	
</style>
